<!-- 我正在开发 我是刘瑶瑶 QQ：1778851996 昵称：喑 -->
<template>
	<view :style="{height: height + 'px'}">
		<!-- 搜索框 -->
		<view class="search">
			<!-- 图标 -->
			<text class="icon iconfont icon-dizhi address fz-44"></text>
			<!-- 输入框 -->
			<input type="text" placeholder="查找消毒位置" />
		</view>
		<!-- 滚动区域 -->
		<scroll-view scroll-y="true" :style="{height: height + 'px'}" upper-threshold="500" @scrolltoupper="addBtn" @scrolltolower="loadmore">
			<block v-for="(item, index) in list" :key="index">
				<my-swipe-action-item @swipeClick="swipeClick($event, item)" @swipeChange="swipeChange($event,index)" :show="activeIndex==index">
					<view class="per-record">
						<view class="per-left">
							<view class="per-address">{{item.locationAddress}}</view>
							<view class="per-time">提交时间：{{item.time}}</view>
						</view>
						<view class="icon iconfont icon-youjiantou arrow"></view>
					</view>
				</my-swipe-action-item>
			</block>
			<!-- 加载更多 -->
			<template v-if="list.length > 6">
				<view class="load-more">{{loadtext}}</view>
			</template>
		</scroll-view>
		<!-- 加号 -->
		<template v-if="isvisible">
			<view class="add" @click="goToAdd">
				<view class="icon iconfont icon-jiahao"></view>
			</view>
		</template>
	</view>
</template>

<script>
	const myCloud = uniCloud.init({
		provider: 'aliyun',
		spaceId: '6cf77a04-ca59-47fd-94bc-512c560f6ca6',
		clientSecret: 'cY2Y7rfbJcRdtnYT3+cwpA=='
	});
	
	export default {
		data() {
			return {
				// 按钮显示
				isvisible: true,
				activeIndex:-1,
				// 滚动页高度
				height: '',
				// 是否有更多数据
				isMore: true,
				// 当前页
				page: 0,
				// 加载文字
				loadtext: '加载中···',
				// 数据列表
				list: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
			  success: (res) => {
					this.height = res.windowHeight - uni.upx2px(120)
					console.log(this.height)
			  }
			})
			// 首次获取数据
			this.getData()
		},
		methods: {
			// 获取列表数据
			getData() {
				myCloud.callFunction({
					name: 'get_distinct',
					data: {
						"offset": this.page == 0 ? this.page : this.page * 7 + 1
					}
				}).then((res) => {
					console.log(res)
					// 获取一次，页码增加一次
					this.page++
					// 将新的数据存入数据列表
					this.list = this.list.concat(res.result.data)
					console.log(this.list)
					// 当记录条数小于6时，则为最后一页数据
					if (res.result.data.length < 7) {
						this.loadtext = '所有记录均以显示'
						this.isMore = false
					}
				})
			},
			// 上拉加载更多
			loadmore() {
				if (this.isvisible) {
					this.isvisible = false
				}
				// 当还存在数据时，再次加载数据
				if (this.isMore) {
					this.getData()
				}
			},
			swipeClick(e, msg){
				if (e.index == 0) {
					// 重置跳转传参
					uni.navigateTo({
						url: '/pages/add_distinct/add_distinct?_id=' + msg._id + '&latitude=' + msg.location.latitude + '&longitude=' + msg.location.longitude + '&locationAddress=' + msg.locationAddress
					})
				} else {
					// console.log(msg._id)
					// 删除
					myCloud.callFunction({
						name: 'del_distinct',
						data: {
							_id: msg._id
						}
					}).then((res) => {
						// console.log(res)
						if (res.result.deleted == 1) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
						}
						this.getData()
					})
				}
			},
			// 滑动展开
			swipeChange(e,index){
				// console.log(e,index);
				if(e){this.activeIndex = index;}
			},
			// 跳转添加页
			goToAdd() {
				uni.navigateTo({
					url: '/pages/add_distinct/add_distinct'
				})
			},
			// 显示添加按钮
			addBtn() {
				this.isvisible = true
			}
		}
	}
</script>
	
<style lang="less" scoped>
	/* 搜索框 */
	.search {
		display: flex;
		width: 700rpx;
		height: 80rpx;
		box-sizing: border-box;
		margin: 20rpx 25rpx 20rpx;
		padding: 18rpx 20rpx;
		border-radius: 40rpx;
		background-color: #F9F9F9;
	}
	/* 地址图标 */
	.address {
		margin-right: 10rpx;
		color: #6DDDCB;
		font-size: 44rpx;
	}
	// 每一条记录
	.per-record {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 160rpx;
		box-sizing: border-box;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #ddd;
	}
	// 每条记录左边
	.per-left {
		position: relative;
		width: 550rpx;
		height: 120rpx;
		font-size: 32rpx;
		color: #333;
	}
	// 每条记录时间
	.per-time {
		position: absolute;
		bottom: 0;
		font-size: 27rpx;
		color: #ccc;
	}
	// 右箭头图标
	.arrow {
		font-size: 40rpx;
		color: #ddd;
	}
	// 加载更多
	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		font-size: 30rpx;
		color: #AAAAAA;
	}
	// 添加按钮
	.add {
		position: fixed;
		right: 60rpx;
		bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border: 5rpx solid #fff;
		border-radius: 55rpx;
		box-shadow: 0 5rpx 14rpx #aaa;
		background-color: #6DDDCB;
	}
	.icon-jiahao {
		font-size: 50rpx;
		color: #fff;
	}
</style>
